<template>
  <div class="header">
    <el-row :gutter="20">
      <el-col :span="16"><div class="grid-content ep-bg-purple" />
        <div class="leftHeader">
          标题
        </div>
      </el-col>
      <el-col :span="8"><div class="grid-content ep-bg-purple" />
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#9a8791"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
        >
          <el-menu-item index="1">
            <img src="../assets/icon_home/shouye.png" alt="首页图标">首页
          </el-menu-item>
          <el-menu-item index="2">
            <img src="../assets/icon_home/sousuo.png" alt="搜索图标">搜索
          </el-menu-item>
          <el-menu-item index="3">
            <img src="../assets/icon_home/yingyong.png" alt="分类图标">分类
          </el-menu-item>
          <el-menu-item index="4">
            <img src="../assets/icon_home/biaoqian.png" alt="标签图标">标签
          </el-menu-item>
          <el-menu-item index="5">
            <img src="../assets/icon_home/zhanghu.png" alt="账户图标">账户
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>

  <div class="article">
    <el-card class="box-card" v-for ="(item) in article">
      <div class="text item" >
        <router-link to="/show" @click="showArticle(item)">
          <b>{{item.title}}</b>
          <br/>
          {{item.introduce}}
        </router-link>
        <hr/>
        <el-row :gutter="2">
          <el-row>
            <div class="listInItem">
              <img src="../assets/icon_home/List.png">
              <el-tag
                  v-for="itemList in item.list"
                  :key="item.list"
                  class="mx-1"
                  effect="light"
                  round
                  @click="articleByLists(itemList)"
              >
                {{ itemList }}
              </el-tag>
            </div>
          </el-row>
          <el-col :span="14">
            <div class="tagInItem">
              <img src="../assets/icon_home/Tag.png">
              <el-tag
                  v-for="itemTags in item.tag"
                  :key="item.tag"
                  class="mx-1"
                  effect="light"
                  round
                  @click="articleByTags(itemTags)"
              >
                {{ itemTags }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="dateInItem">
              2021-10-1
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!--分页组件-->
    <el-pagination
        background
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,10,20]"
        :total="total"
        layout="prev, pager, next, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import axios from "axios";
import {Article} from "../api/index.js";
import {setToken} from "../utils/session.js";

const router=new useRouter();

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const article = [
  {
    id:1,
    title:"文章标题1",
    introduce:"吴恩达日前在DeepLearning.AI平台分享了2022年AI趋势预测，第一就是多模态AI将起飞。本文介绍多模态机器学习的定义、发展历史、主要任务和挑战，以及目前SOTA的CLIP模型。",
    content:"OpenAI通过一系列的筛选，找到了40个对不同人口群体的偏好敏感并且善于识别可能有害的输出的全职标记人员。整个过程中，OpenAI的研发人员跟这些标记人员紧密合作，给他们进行了培训，并对他们是否能够代表大众的偏好进行了评测。\n" +
        "\n" +
        "标记人员的工作是根据内容自己编写prompt，并且要求编写的Prompt满足下面三点：",
    list:["编程学习"],
    tag: ["CSS","HTML","C++"],
    date:"2023-08-24",
  },
  {
    id:2,
    title:"文章标题2",
    introduce:"吴恩达日前在DeepLearning.AI平台分享了2022年AI趋势预测，第一就是多模态AI将起飞。本文介绍多模态机器学习的定义、发展历史、主要任务和挑战，以及目前SOTA的CLIP模型。",
    content:"OpenAI通过一系列的筛选，找到了40个对不同人口群体的偏好敏感并且善于识别可能有害的输出的全职标记人员。整个过程中，OpenAI的研发人员跟这些标记人员紧密合作，给他们进行了培训，并对他们是否能够代表大众的偏好进行了评测。\n" +
        "\n" +
        "标记人员的工作是根据内容自己编写prompt，并且要求编写的Prompt满足下面三点：",
    list:["机器学习"],
    tag:["机器学习","深度学习"],
    date:"2022-08-24",
  },
  {
    id:3,
    title:"文章标题3",
    introduce:"吴恩达日前在DeepLearning.AI平台分享了2022年AI趋势预测，第一就是多模态AI将起飞。本文介绍多模态机器学习的定义、发展历史、主要任务和挑战，以及目前SOTA的CLIP模型。",
    content:"OpenAI通过一系列的筛选，找到了40个对不同人口群体的偏好敏感并且善于识别可能有害的输出的全职标记人员。整个过程中，OpenAI的研发人员跟这些标记人员紧密合作，给他们进行了培训，并对他们是否能够代表大众的偏好进行了评测。\n" +
        "\n" +
        "标记人员的工作是根据内容自己编写prompt，并且要求编写的Prompt满足下面三点：",
    list:["C语言学习"],
    tag: ["C++","C语言"],
    date:"2021-08-24",
  }
]

function showArticle(item){
  router.push({
    //添加需要传值到那个页面的路径
    name:'showArticle',
    //携带需要传递的参数
    query:{
      info:item.content,
    }
  })
}
function articleByTags(itemTag){
  console.log(itemTag)
}
function articleByLists(itemTag){
  console.log(itemTag)
}

const articleData = ref([])
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);

onMounted(() => {
  getData()
})

//获取当前页数据
// const getData = () => {
//   axios.get('http://localhost:8765/api/article/{id}', )
//       .then(response => {
//         articleData.value = response.data.records;
//         total.value = response.data.total;
//         console.log(currentPage.value+'a')
//       })
//       .catch(error => {
//         console.error(error);
//       });
// };

const data = {name:"hyf",word:"123"}
const getData = () => {
  Article(data).then((res) => {
    //回调信息
    articleData.value = res.data();
  })
}

//处理页码变化点击事件
const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  getData();
};
//处理每页显示多少条事件
const handleSizeChange=(pagesize)=>{
  pageSize.value=pagesize;
  getData();
}
</script>

<style scoped>
.header{
  background: #9a8791;
}

.leftHeader{
  float: left;
  width: 100px;
  text-align: center;
  color: #ffffff;
  padding-top: 20px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  margin-top: 30px;
}

.article{
  width: 800px;
  margin: 0 auto;
}

.router-link active {
  text-decoration: none;
  color: #000000;
}

a {
  text-decoration: none;
  color: #000000;
}

.mx-1{
  color: #ffffff;
  background: #9a8791;
  cursor: pointer;
}

.dateInItem{
  text-align: right;
}

.el-pagination{
  justify-content: center;
}
</style>